<template>
  <div>
    <van-sticky>
      <van-nav-bar id="nav" title="交易广场" @click-right="goAdd">
        <template #right>
          <button class="right-button">+发布</button>
        </template>
      </van-nav-bar>

      <form action="/">
        <van-search
          v-model="value"
          show-action
          label="名称"
          placeholder="请输入搜索关键词"
          @search="onSearch"
        >
          <template #action>
            <div @click="onSearch">搜索</div>
          </template>
        </van-search>
      </form>
    </van-sticky>
    <div class="container-water-fall">
      <waterfall 
      :col="col" 
      :data="data" 
      @scroll="scroll">
        <template>
          
          <div class="cell-item" 
          v-for="item in data" 
          :key="item.id">
          <router-link 
            :to="'/aboutview/' + item.id">
            <img v-if="item.img" 
            :src="path + item.img" 
            alt="加载错误" />

            <div class="item-body">
              <div class="item-desc">
                {{ item.title }} 

                <van-icon @click.stop.prevent="on_red($event)" 
                :id="item.id" 
                v-if="item.css == 0" 
                class="xin" 
                name="like-o" 
                size="25"/>    

                <van-icon @click.stop.prevent="off_red($event)" 
                :id="item.id" 
                v-else class="xin_o" 
                name="like-o" 
                size="25"/>                      
              </div>
            </div> 
             </router-link>
          </div>
         
        </template>
      </waterfall>
      <!-- <loading :show="loading" /> -->
    </div>
    <div style="width: 100%; height: 50px"></div>
    <my-bottom :active="1"></my-bottom>
  </div>
</template>


<script>
import MyBottom from "@/components/MyBottom.vue";
import { mapState } from "vuex";
import { searchView,viewList,onRed,offRed } from "../api";
import axios from "axios";
import { Toast } from "vant";

export default {
  components: { MyBottom },
  data() {
    return {
      data: [],
      col: 2,
      value: '',
    };
  },
  computed: {
    ...mapState({
      path: (state) => state.path,
      icons: (state) => state.icons,
    }),
    itemWidth() {
      return 138 * 0.5 * (document.documentElement.clientWidth / 375); //rem布局 计算宽度
    },
    gutterWidth() {
      return 9 * 0.5 * (document.documentElement.clientWidth / 375); //rem布局 计算x轴方向margin(y轴方向的margin自定义在css中即可)
    },
  },
  methods: {
    scroll(scrollData) {
      console.log(scrollData);
    },
    switchCol(col) {
      this.col = col;
      console.log(this.col);
    },
    goAdd() {
      this.$router.push("/useradd");
    },
    onSearch() {
       
      searchView({str_search: this.value})
      .then(res =>{
          console.log(res);
          this.data = res.data;
      })
       .catch( (error) => {
        console.log(error);
      });
    },

    on_red(a){
      onRed({id: a.currentTarget.id})
      .then(res =>{
          console.log(res);
          Toast("已收藏");
          this.$router.go(0);
      })
       .catch( (error) => {
        console.log(error);
      });
    },
    off_red(a){
    offRed({id: a.currentTarget.id})
          .then(res =>{
              console.log(res);
              Toast("取消收藏");
              this.$router.go(0);
          })
          .catch( (error) => {
            console.log(error);
          });
    }

  },



  created() {
    axios
    .get("/api/viewlist.php")
    .then((res) => {
      this.data = res.data.data;
    });
  },
};
</script>

<style scpoed>
#nav {
  background-color: rgb(24, 154, 100);
}
#nav {
  font-size: 20px;
  color: rgb(255, 255, 255);
}
.right-button {
  background: none;
  border-radius: 10%;
  border: none;
  color: rgb(255, 255, 255);
}
* {
  margin: 0;
}
.cell-item {
  width: 100%;
  margin-bottom: 10px;
  background: #ffffff;
  border: 2px solid #f0f0f0;
  border-radius: 12px 12px 12px 12px;
  overflow: hidden;
  box-sizing: border-box;
}
.router-link-active {
  text-decoration: none;
  color: orange;
}
a{
  text-decoration: none;
  color: grey;
}
.xin{
  float: right;
  margin-top: 10px;
  margin-right: 10px;
}
.xin_o{
  float: right;
  margin-top: 10px;
  margin-right: 10px;
  color: rgb(255, 0, 0);
}
img {
  width: 100%;
  height: auto;
  display: block;
}
.item-desc {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: center;
  line-height: 40px;
}
</style>
